<template>
  <div class="menu">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button @click="$router.push({ name: 'menu-create' })">添加广告</el-button>
      </div>
      <el-table
        :data="adList"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="id"
          min-width="150"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="广告名称"
          min-width="150">
        </el-table-column>
        <el-table-column
          label="广告位置"
          min-width="150">
          <template slot-scope="scope">
            {{adSpace(scope.row)}}
          </template>
        </el-table-column>
        <el-table-column
          label="广告图片"
          min-width="150">
          <template slot-scope="scope">
            <img v-bind:src="scope.row.img" style="max-height: 80px;"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="level"
          label="时间"
          min-width="150">
          <template slot-scope="scope">
            <div>开始时间：{{scope.row.startTime}}</div>
            <div>结束时间：{{scope.row.endTime}}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="上线/下线"
          min-width="150">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              :disabled="scope.row.isStatusLoading"
              @change="onStateChange(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          min-width="150">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { getAdList, changeState } from '@/services/advert'
import { getAdSpaceList } from '@/services/advert-space'

export default Vue.extend({
  name: 'AdvertIndex',
  data () {
    return {
      filterParams: {
        currentPage: 1,
        pageSize: 10
      },
      adList: [],
      adSpaceList: []
    }
  },
  created () {
    this.loadAllAds()
  },
  computed: {
    adSpace () {
      return (ad: any) => {
        const space = this.adSpaceList.find((adSpace: any) => adSpace.id === ad.spaceId)
        return space ? (space as any).name : ''
      }
    }
  },
  methods: {
    async loadAllAds () {
      const [adList, adSpaceList] = await Promise.all([getAdList(), getAdSpaceList()])

      adList.data.content.forEach((item: any) => {
        item.isStatusLoading = false
      })
      this.adList = adList.data.content
      this.adSpaceList = adSpaceList.data.content
    },
    handleEdit (item: any) {
      this.$router.push({
        name: 'advert-edit',
        params: {
          id: item.id
        }
      })
    },
    async onStateChange (ad: any) {
      ad.isStatusLoading = true
      await changeState({
        id: ad.id,
        status: ad.status === 0 ? 1 : 0
      })
      this.$message.success(`${ad.status === 0 ? '下架' : '上架'}成功`)
      ad.isStatusLoading = false
    }

  }
})
</script>

<style lang="scss" scoped></style>
